Vue.js components
globalとlocal
code:global_component.js
Vue.component("foo", {
template: <div>..</div>,
data(){
name: "hello"
}});
new Vue({ el: '#app'})
code: local_component.js
new Vue({ el: '#app',
components: {
'foo': {template: <div>...</div>}
}})
記法:
componentをhtmlのタグで書く所では、属性名(props、非props、共に)はケバブケースで書く。
これをcomponent側で、
componentする => 入れ子にする。
component間のデータの受け渡し:
Props down, Event Up
親から子供にはpropsを使う。
子供から親へeventを送って伝える
具体的には、
ビルトインの $emit メソッド にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
子供コンポーネントで、例: v-on:click="$emit('enlarge-text')">
親コンポーネントで、そのイベント(例: enlarge-text)の v-on:enlarge-text= "expression"
Vuex: 子供同士(同一階層) 、子供から親が複雑な場合などは、Vuexを使ってStoreを定義して管理する。